<template>
<div class="auth-container">
  <el-card class="auth-card">
    <h3>CCR宠物商城商家后台</h3>
    <h2 class="auth-title">欢迎登录</h2>
    <el-tabs v-model="activeTab" stretch @tab-click="clearForms">
      <el-tab-pane label="账号登录" name="account">
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginFormRef"
          label-width="80px">
          <el-form-item label="账  号" prop="user.username">
            <el-input v-model="loginForm.user.username" placeholder="用户名/手机号"/>
          </el-form-item>
          <el-form-item label="密  码" prop="user.password">
            <el-input v-model="loginForm.user.password" show-password placeholder="请输入密码"/>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="手机登录" name="phone">
        <el-form
          :model="loginForm"
          :rules="phoneLoginRules"
          ref="phoneLoginFormRef"
          label-width="80px">
          <el-form-item label="手机号" prop="user.phone">
            <el-input v-model="loginForm.user.phone" placeholder="请输入手机号"/>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div class="code-input">
              <el-input v-model="loginForm.code" placeholder="6位验证码"/>
              <el-button
                type="primary"
                :disabled="countdown > 0"
                @click="sendcode">
                {{ countdown ? `${countdown}秒后重发` : '获取验证码' }}
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div class="action-area">
      <el-button
        type="primary"
        class="submit-btn"
        @click="handleLogin">
        登录
      </el-button>
    </div>
  </el-card>
  <el-dialog v-model="isBrandSelectionVisible" @close="isBrandSelectionVisible = false">
    <h3>选择品牌</h3>
    <div  class="brand-item">
      <div v-for="brand in userStore.brands" :key="brand.brandId">
        <el-avatar :size="50" :src="brand.brandLogo"></el-avatar>
        <div style="margin-left: 10px;">
          <p>{{ brand.brandName }}</p>
        </div>
        <el-radio v-model="selectedBrandId" :label="brand.brandId"></el-radio>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="isBrandSelectionVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmBrandSelection">确定</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { useLoginStore } from "@/stores/login";
import { sendSms } from "@/common/net/api";
import router from "@/router";

const userStore = useLoginStore();
// 状态管理
const activeTab = ref('account'); // 控制登录方式切换
const countdown = ref(0); // 验证码倒计时
let timer: number; // 倒计时定时器

// 登录表单
const loginForm = reactive({
  user: {
    username: '',
    password: '',
    phone: '',
  },
  code: ''
});

// 表单引用
const loginFormRef = ref<FormInstance>();
const phoneLoginFormRef = ref<FormInstance>();

// 验证规则
const loginRules: FormRules = {
  'user.username': [{ required: true, message: '请输入账号', trigger: 'blur' }],
  'user.password': [{ required: true, message: '请输入密码', trigger: 'blur' }]
};

const phoneLoginRules: FormRules = {
  'user.phone': [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码格式不正确' }
  ]
};

// 发送验证码
const sendcode = async () => {
  const phone = loginForm.user.phone;
  const result = await sendSms(phone);
  if (result.data.state) {
    startCountdown();
    ElMessage.success("发送成功");
  } else {
    ElMessage.error(result.data.msg);
  }
};

// 倒计时处理
const startCountdown = () => {
  countdown.value = 60;
  timer = window.setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer);
    }
  }, 1000);
};

// 清空表单
const clearForms = () => {
  loginFormRef.value?.resetFields();
  phoneLoginFormRef.value?.resetFields();
};
const isBrandSelectionVisible = ref(false); // 控制品牌选择弹窗的显示
const selectedBrandId = ref<number | null>(null); // 选中的品牌ID
// 登录处理
const handleLogin = async () => {
  const formRef = activeTab.value === 'account' ? loginFormRef.value : phoneLoginFormRef.value;
  if (!formRef) return;
  formRef.validate(async () => {
    await userStore.handleLogin(loginForm).then((response) => {
      if (response) {
        console.log(userStore.brands)
        console.log(userStore.user)
        console.log(response.data.brands)
        if (response.data.brands.length > 1) {
          // 多品牌，显示品牌选择弹窗
          isBrandSelectionVisible.value = true;
        } else {
          if (userStore.handleConfirmBrand(response.data.brands[0].brandId.toString())) {
            ElMessage.success("登录成功");
            isBrandSelectionVisible.value = false;
          }

        }
      }
    })
  });
};
// 调用 Pinia 中的品牌确认逻辑
function confirmBrandSelection() {
  if (selectedBrandId.value) {
    if (userStore.handleConfirmBrand(selectedBrandId.value.toString())) {
      ElMessage.success("登录成功");
      console.log("执行跳转")
      isBrandSelectionVisible.value = false;
      router.push("/")
    }
  }}
</script>
<style scoped>
.auth-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: background-color 0.5s ease; /* 添加背景颜色过渡效果 */
  /*background: linear-gradient(45deg, #6db2bb, #39abaf, #187a6f);*/
  background-image: url("@/assets/bg3.jpg");
  background-size: contain;
  background-position: center; /* 确保图片居中显示 */
}
.auth-card {
  width: 330px;
  height: 300px;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  margin-left: 16%;
  position: relative; /* 确保伪元素可以正确定位 */
}
.brand-item{
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 10px; /* 子元素之间的间距 */
  margin-bottom: 20px; /* 每行之间的间距 */
  flex: 1 0 20%; /* 每个品牌项占20%的宽度 */
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0, #d3d3d3); /* 模拟水墨的浅灰色渐变 */
  opacity: 0.3;
  transition: opacity 0.5s ease; /* 添加渐变透明度过渡效果 */
  z-index: -1;
  background-size: 400% 400%; /* 调整渐变的大小 */
  animation: inkGradient 5s ease infinite; /* 添加水墨流动的动画效果 */
}
h3 {
  font-family: "STXingkai", "KaiTi", sans-serif; /* 使用更接近书法字体 */
  font-size: 18px;
  color: #333;
}
.submit-btn {
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0, #d3d3d3); /* 按钮背景渐变 */
  color: #333; /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: all 0.3s ease;
  margin-top: -10px;
}

/* 修改验证码按钮样式 */
.code-input .el-button {
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0, #d3d3d3); /* 按钮背景渐变 */
  color: #333; /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: all 0.3s ease;
}

.code-input .el-button:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增强阴影 */
}

/* 修改其他按钮样式 */
.el-dialog .el-button {
  background: linear-gradient(135deg, #f5f5f5, #e0e0e0, #d3d3d3); /* 按钮背景渐变 */
  color: #333; /* 按钮文字颜色 */
  border: none; /* 去掉边框 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: all 0.3s ease;
}

.el-dialog .el-button:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增强阴影 */
}
.submit-btn:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增强阴影 */
}

.auth-card:hover::before {
  opacity: 0.7; /* 鼠标悬停时增强渐变效果 */
}

@keyframes inkGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.code-input {
  display: flex;
  gap: 6px;
}

.action-area {
  margin-top: 20px;
  text-align: center;
}

.submit-btn {
  width: 100%;
  height: 40px;
  border-radius: 20px;
}

.switch-action span {
  color: #0a57a6;
  margin: 0 5px;
}

.switch-action span:hover {
  text-decoration: underline;
}
/* 使用深度选择器覆盖 Element UI 的样式 */
.auth-container ::v-deep(.el-tabs__nav) {
  font-family: "STXingkai", "KaiTi", sans-serif; /* 使用更接近书法字体 */
  font-size: 16px; /* 调整字体大小 */
  margin-top: 10px;
}

/* 修改未选中状态的标签颜色 */
.auth-container ::v-deep(.el-tabs__item) {
  color: #999; /* 未选中状态的字体颜色，使用灰色 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 修改选中状态的标签颜色 */
.auth-container ::v-deep(.el-tabs__item.is-active) {
  color: black; /* 选中状态的字体颜色，使用深蓝色 */
  font-weight: bold; /* 加粗字体 */
}

/* 修改标签的悬停效果 */
.auth-container ::v-deep(.el-tabs__item:hover) {
  color: black; /* 悬停时的字体颜色，使用深蓝色 */
}

/* 修改 ElForm 的字体样式 */
.auth-container ::v-deep(.el-form-item__label) {
  font-family: "STXingkai", "KaiTi", sans-serif; /* 使用更接近书法字体 */
  font-size: 14px; /* 调整字体大小 */
  color: #333; /* 字体颜色 */
}
</style>
